<!DOCTYPE html>
<html lang="en">

<head>
  <title>three.js webgl - geometry - cube</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
  <link type="text/css" rel="stylesheet" href="https://threejs.org/examples/main.css" />
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <script type="importmap">
      {
        "imports": {
          "three": "https://threejs.org/build/three.module.js",
          "three/addons/": "https://threejs.org/examples/jsm/"
        }
      }
    </script>

  <script type="module">
    import * as THREE from "three";
    let camera, scene, renderer;
    let mesh;

    init();

    function init() {
      camera = new THREE.PerspectiveCamera(
        70,
        window.innerWidth / window.innerHeight,
        0.1,
        100
      );
      camera.position.z = 2;

      scene = new THREE.Scene();

      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });

      mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);

      renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setAnimationLoop(animate);
      document.body.appendChild(renderer.domElement);

      //

      window.addEventListener("resize", onWindowResize);
    }

    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();

      renderer.setSize(window.innerWidth, window.innerHeight);
    }
    // let frameCount = 0;
    // function animate() {
    //   frameCount++;
    //   console.log(`动画帧数: ${frameCount}`);
    //   mesh.rotation.x += 0.005;
    //   mesh.rotation.y += 0.01;

    //   renderer.render(scene, camera);
    // }

    const clock = new THREE.Clock();
    function animate() {
      const deltaTime = clock.getDelta() * 1000;
      console.log('两帧渲染时间间隔(毫秒):', Math.floor(deltaTime));

      // 计算并输出帧率
      const fps = 1000 / deltaTime;
      console.log('帧率FPS:', Math.round(fps));

      // 执行渲染操作
      renderer.render(scene, camera);
 

      // 请求浏览器在下一帧再次调用render函数
      requestAnimationFrame(animate);
    }
    animate();
    animate();

  </script>
</body>

</html>